
<!-- 委托书 -->
<template>
  <div class="subtim_qyfd_int">
    <ul class="subtim_qyfd_int_ul">
      本企业（名称）
      <el-input class="qyfd_int" v-model.trim="RepotFrom2.enterpriseName" :disabled="isdisabled" placeholder="企业名称"
        maxlength="18" />
      （证件类型）<span class="red">组织机构代码</span>（证件号码）
      <el-input class="qyfd_int" placeholder="证件号码" :disabled="isdisabled" v-model.trim="RepotFrom2.organizationCodes" />
      兹授权（代理人名称）
      <el-input class="qyfd_int" placeholder="代理人名称" :disabled="isdisabled" v-model.trim="RepotFrom2.applyName" />
      证件类型 <span class="red">身份证</span>（证件号码）
      <el-input class="qyfd_int" placeholder="身份证" :disabled="isdisabled" v-model.trim="RepotFrom2.applyCertificateNo" />
      作为代理人，办理本企业信用报告查询业务。授权有效期至&nbsp;&nbsp;

      <el-date-picker class="!w-[200px]" type="date" :disabled="isdisabled" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
        v-model="RepotFrom2.queryDate" placeholder="请选择日期时间" />
    </ul>
    <p class="tcsq">特此授权。</p>
    <dl class="subtim_qyfd_int_dl">
      <dd>企业法定代表人签字：<el-input class="qyfd_int" :disabled="isdisabled" v-model.trim="RepotFrom2.LegalName"
          placeholder="企业法定代表人签字" /></dd>
      <dd>签发日期：<el-date-picker class="!w-[200px]" :disabled="isdisabled" v-model="RepotFrom2.DateIssue" type="date"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期时间" /></dd>
    </dl>
    <hr style="margin-top: 10px;">
    <h3 style="text-align: center;">承诺</h3>
    <p class="tcsq">以上委托证明书系企业法定代表人亲自出具，如有不实，本人愿意承担法律责任。</p>
    <dl class="subtim_qyfd_int_dl">
      <dd>代理人签字：<el-input class="qyfd_int" :disabled="isdisabled" v-model.trim="RepotFrom2.applySign"
          placeholder="代理人签字" />
      </dd>
      <dd>承诺日期：<el-date-picker class="!w-[200px]" :disabled="isdisabled" v-model="RepotFrom2.signDate" type="date"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期时间" /></dd>
    </dl>
    <!-- 盖章位置 -->
    <i class="me_fqx" id="view_FQX"></i>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance } from "element-plus";
import { ref, reactive, watch } from "vue";
import { FXQ } from "@/utils/public/FXQ"
const isdisabled = ref<boolean>(false)
const props = defineProps({
  data: {
    type: Object,
    default: []
  }
})


const RepotFrom2 = reactive({
  enterpriseName: "",//企业名称
  organizationCodes: "",//组织机构代码
  queryDate: "",//授权日期
  DateIssue: "",// 签发日期
  applyName: "",// 代理人名称
  LegalName: "",//法定代表人签字
  applyCertificateNo: "",//证件号码
  applySign: "",//代理人签字
  signDate: "" // 代理日期
})



// 父组件调用盖章
function seal() {
  const fields = {
    enterpriseName: "企业名称",
    organizationCodes: "组织机构代码",
    applyName: "代理人名称",
    applyCertificateNo: "证件号码",
    queryDate: "授权日期",
    LegalName: "法定代表人签字",
    DateIssue: "签发日期",
    applySign: "代理人签字",
    signDate: "代理日期"
  };

  for (const field in fields) {
    if (!RepotFrom2[field]) {
      ElMessage.warning(fields[field] + "不能为空");
      return false;
    }
  }
  return true;
};

// 查看委托证书
function view_FQX(data) {
  isdisabled.value = true;
  RepotFrom2.enterpriseName = data.thisCompanyName;
  RepotFrom2.organizationCodes = data.thisCertificateNo;
  RepotFrom2.queryDate = data.authorizeDate;
  RepotFrom2.DateIssue = data.legalPersonDate;
  RepotFrom2.applyName = data.agentName;
  RepotFrom2.LegalName = data.legalPerson;
  RepotFrom2.applyCertificateNo = data.agentCertificateNo;
  RepotFrom2.applySign = data.agent;
  RepotFrom2.signDate = data.agentDate;
  // 生成章
  const MYFXQ = FXQ.companySeal(data.thisCompanyName, 0, 0, '', '');
  let view_FQX = document.querySelector("#view_FQX");
  let MYFQX = `<img src='${MYFXQ}' style="width:100%;height:100%"  />`
  view_FQX.innerHTML = MYFQX;
}

watch(props, (newval) => {
  console.log("watch", newval.data)
  if (newval.data) {
    view_FQX(newval.data);
  }
})


defineExpose({
  RepotFrom2,
  seal
})
</script>


<style lang="scss" scoped>
.form_title {
  text-align: center;
  padding: 5px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  background-color: #f3f3f3;
  color: #409eff;
}

.subtim_qyfd_int {
  line-height: 42px;
  position: relative;
  padding: 15px;
  font-size: 14px;

  .tcsq {
    text-align: left;
    padding-left: 20px;
  }

  .subtim_qyfd_int_ul {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .subtim_qyfd_int_dl {
    text-align: right;
  }

  .qyfd_int {
    width: 190px;
    margin: 0 5px;
  }

  // 盖章
  .me_fqx {
    display: inline-block;
    width: 160px;
    height: 160px;
    position: absolute;
    right: 25%;
    top: 43%;
  }
}

.red {
  margin-left: 5px;
  color: red;
}
</style>
